<route lang="jsonc" type="page">
{
  "layout": false,
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "登录"
  }
}
</route>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { tabbarList } from '@/tabbar/config'
import { isPageTabbar } from '@/tabbar/store'
import { ensureDecodeURIComponent } from '@/utils/index'

defineOptions({
  style: {
    virtualHost: true,
  },
})
const redirectUrl = ref('')
onLoad((options) => {
  console.log('login options', options)
  if (options.redirect) {
    redirectUrl.value = ensureDecodeURIComponent(options.redirect)
  }
  else {
    redirectUrl.value = tabbarList[0].pagePath
  }
})
const form = ref()
const model = reactive({
  username: '',
  password: '',
  remember: true,
})
const userStore = useUserStore()

function submitForm() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        console.log('model', model)
        doLogin(model)
      }
      else {
        console.log('errors', errors)
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
}
function doLogin(model) {
  // TODO: 1）调用登录接口
  // TODO: 2）登录成功后，再调用获取用户信息的接口

  // 假设下面是接口获取回来的数据
  userStore.setUserInfo({
    id: 1,
    username: model.username,
    // password: model.password,
    token: 'fake-token',
    role: '管理员',
    department: '水利局监测中心',
  })
  console.log(redirectUrl.value)
  let path = redirectUrl.value
  if (!path.startsWith('/')) {
    path = `/${path}`
  }
  console.log('path:', path)
  if (isPageTabbar(path)) {
    uni.switchTab({
      url: path,
    })
  }
  else {
    uni.redirectTo({
      url: path,
    })
  }
}
</script>

<template>
  <view class="login">
    <view class="login-form">
      <wd-form ref="form" :model="model">
        <wd-cell title="用户名" vertical>
          <wd-input v-model="model.username" prop="username" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
        </wd-cell>
        <wd-cell title="密码" vertical>
          <wd-input v-model="model.password" prop="password" placeholder="请输入密码" show-password :rules="[{ required: true, message: '请填写密码' }]" />
        </wd-cell>
        <wd-cell title="" vertical>
          <wd-checkbox v-model="model.remember" shape="square">
            记住密码
          </wd-checkbox>
        </wd-cell>
        <wd-cell title="" vertical>
          <wd-button type="primary" block @click="submitForm">
            登录
          </wd-button>
        </wd-cell>
      </wd-form>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login {
  padding-top: 20vh;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
  background-image: url('https://oss.laf.run/ukw0y1-aimang/water-app/login-bg.png');
  background-size: cover;
}
.login-form {
  margin: auto;
  width: 200px;
  background-color: transparent;
}
:deep(.wd-cell) {
  background-color: transparent !important;
}
:deep(.wd-input) {
  border-radius: 4px;
  .wd-input__body {
    padding-left: 1em;
    padding-right: 1em;
  }
}
:deep(.wd-cell__title),
:deep(.wd-checkbox__txt) {
  color: #fff;
  font-weight: bolder;
}
</style>
